/*
 * @文件描述: 通用头部
 * @公司: 山东大学信息学院
 * @作者: 李洪文
 * @Date: 2019-12-26 15:06:40
 * @LastEditors: 李洪文
 * @LastEditTime: 2020-10-10 10:52:56
 */
import React from 'react';
import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
import { Header, Left, Body, Right, Title } from 'native-base';
import { RectButton } from 'react-native-gesture-handler';
import NavigationService from '@/NavigationService';
import Icon from 'react-native-vector-icons/AntDesign';
import { colors } from '@/config';

interface ICHeaderProps {
  title: string | React.ReactElement;
  right?: React.ReactElement;
  style?: ViewStyle;
  iconStyle?: TextStyle;
}

export default function CHeader({ title, right, style, iconStyle }: ICHeaderProps) {
  return (
    <Header style={[{ backgroundColor: colors.white }, style]} androidStatusBarColor={colors.primary}>
      <Left style={{ flex: 1 }}>
        <RectButton onPress={() => NavigationService.pop()}>
          <Icon style={iconStyle} name="arrowleft" size={22} />
        </RectButton>
      </Left>
      <Body style={styles.headerTitle}>
        {typeof title === 'string' ? <Title style={{ color: colors.black }}>{title}</Title> : title}
      </Body>
      <Right style={{ flex: 1 }}>{right}</Right>
    </Header>
  );
}

const styles = StyleSheet.create({
  headerTitle: {
    flex: 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
